<html>

<head>
  <meta charset="utf-8">
  <title>中国广电聊城公司工程预结算管理平台</title>
  <!-- 引入其它组件 -->
  <!-- 引入 layui -->
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/app.css">
</head>

<body>
  <div class="layui-layout layui-layout-admin">

    <div class="layui-header"
      style="display: flex; justify-content: center; align-items: center; padding: 0 15px;height: 60px;">

      <div class="title-logo"
        style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); margin: 0;">
        <span style="font-size: 20px; color: #e6e6e6;">中国广电聊城公司工程项目管理平台</span>
      </div>

      <div style="margin-left: auto;">
        <button id="pwd-btn" class="layui-btn layui-btn-primary layui-btn-radius" title="修改密码"><i
            class="layui-icon layui-icon-password" style="font-size: 16px; color: #e1ff1e;"></i></button>
      </div>
      <div>
        <button id="logout-btn" class="layui-btn layui-btn-primary layui-btn-radius" title="退出登录"><i
            class="layui-icon layui-icon-logout" style="font-size: 16px; color: #e1ff1e;"></i></button>
      </div>
    </div>


    <div class="layui-side layui-bg-black" style="width:160px;">
      <div class="layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree " lay-filter="bsm_main" lay-shrink="all">
          <li class="layui-nav-item ">
            <a href="javascript:;"><b>预算管理</b></a>
            <dl class="layui-nav-child">
              <dd><a href="#" data-template="budget_design.html">预算设计</a></dd>
              <dd><a href="#" data-template="budget_import.html">预算导入</a></dd>
              <!-- <dd><a href="#" data-template="budget_review.html">预算审核</a></dd> -->
            </dl>
          </li>
          <li class="layui-nav-item ">
            <a href="javascript:;"><b>结算管理</b></a>
            <dl class="layui-nav-child">
              <dd><a href="#" data-template="settlement_design.html">结算设计</a></dd>
              <dd><a href="#" data-template="settlement_import.html">结算导入</a></dd>
              <!-- <dd><a href="#" data-template="settlement_review.html">结算审核</a></dd> -->
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:;"><b>系统管理</b></a>
            <dl class="layui-nav-child">
              <dd><a href="#" data-template="">折扣设置</a></dd>
              <dd><a href="#" data-template="">计取设置</a></dd>
              <!-- <dd><a href="javascript:;" id="logout-btn">退出</a></dd> -->
            </dl>
          </li>
        </ul>
      </div>
    </div>

    <div class="layui-body">
      <!-- 内容主体区域 -->
      <div id="content"></div>
    </div>

    <div class="layui-footer" id="main-footer"
      style="display: flex; justify-content: space-between; align-items: center; font-size: 12px;">
      <!-- 底部固定区域 -->
      <!-- 左侧：用户信息 -->
      <div class="footer-left">
        <span id="user-info">
          <i class="layui-icon layui-icon-user"></i>
          <span id="username">加载中...</span>
          <span id="user-department" style="margin-left: 8px;"></span>
        </span>
      </div>

      <!-- 中间：系统状态 -->
      <div class="footer-center">
        <span id="system-status">
          <i class="layui-icon layui-icon-ok-circle" style="color: #5FB878;"></i>
          <span>系统运行正常</span>
        </span>
      </div>

      <!-- 右侧：时间和辅助信息 -->
      <div class="footer-right">
        <span id="current-time"></span>
        <span style="margin: 0 5px;">|</span>
        <a href="javascript:void(0);" onclick="showHelp()">帮助</a>
        <span style="margin: 0 5px;">|</span>
        <a href="javascript:void(0);" onclick="showAbout()">关于</a>
      </div>
    </div>
  </div>

  <script src="/js/config/api.js"></script>
  <script src="/js/http.js"></script>
  <script src="/layui/layui.js"></script>
  <script src="/js/utils.js"></script>
  <script>
    // 页面加载时检查登录状态
    (function () {
      // 检查是否有有效的token
      if (!localStorage.getItem('token')) {
        // 如果没有token，重定向到登录页
        window.location.replace('/');
        return;
      }

      // 添加历史记录条目，防止后退到登录页
      if (window.history && window.history.replaceState) {
        window.history.replaceState({ isMainPage: true }, null, window.location.href);
        window.history.pushState({ isMainPage: true }, null, window.location.href);
      }
    })();

    // 监听popstate事件，阻止后退到登录页
    window.addEventListener('popstate', function (event) {
      // 检查是否是来自主页面的状态
      if (event.state && event.state.isMainPage) {
        if (window.history && window.history.replaceState) {
          // 显示提示信息
          layer.msg('请使用退出登录功能', { icon: 0 });

          // 立即替换当前状态，阻止后退
          window.history.replaceState({ isMainPage: true }, null, window.location.href);

          // 再次添加新的历史记录条目
          setTimeout(function () {
            window.history.pushState({ isMainPage: true }, null, window.location.href);
          }, 100);
        }
      }
    });

    // 显示用户信息和更新时间
    function initFooter() {
      // 从localStorage获取用户信息
      const userData = localStorage.getItem('user');
      if (userData) {
        try {
          const user = JSON.parse(userData);
          document.getElementById('username').textContent = user.user_name || '未知用户';
          document.getElementById('user-department').textContent = user.org_litename ? `(${user.org_litename})` : '';
        } catch (e) {
          console.error('解析用户信息失败:', e);
        }
      }

      // 更新时间
      updateTime();
      setInterval(updateTime, 1000);
    }

    // 更新时间显示
    function updateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');

      document.getElementById('current-time').textContent = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }

    // 帮助函数
    function showHelp() {
      layer.open({
        type: 2,
        title: '系统帮助',
        content: '/help.html',
        area: ['800px', '500px']
      });
    }

    // 关于函数
    function showAbout() {
      layer.open({
        title: '关于系统',
        content: '<div style="padding: 20px;text-align: center;">工程预结算设计管理系统<br>版本: 1.0<br>&copy; 2025 版权所有</div>'
      });
    }

    layui.use(['form', 'element', 'table', 'jquery', 'layer'], function () {
      var element = layui.element;
      var table = layui.table;
      var $ = layui.$;
      var layer = layui.layer;
      var util = layui.util;
      var bsm_utils = layui.bsm_utils;

      // 初始化底部状态栏
      initFooter();


      element.on('nav(bsm_main)', function (elem) {
        var $a = elem.is('a') ? elem : elem.find('a');
        var template = $a.attr('data-template');

        if (!template) { // 非功能按钮
          return;
        }

        layer.load(1);

        fetch('/templates/' + template)
          .then(response => {
            if (!response.ok) throw new Error('加载失败');
            return response.text();
          })
          .then(html => {
            $('#content').html(html);
            // if (window.initSubPage) initSubPage();

            // 在成功加载子页面后，添加一个新的历史记录状态
            // if (window.history && window.history.pushState) {
            //   window.history.pushState({ isSubPage: true, template: template }, null, '#subpage=' + template);
            // }
          })
          .catch(err => {
            layer.msg('加载失败: ' + err.message, { icon: 2 });
            console.error(err);
          })
          .finally(() => layer.closeAll('loading'));
      });

      document.getElementById('pwd-btn').addEventListener('click', function () {
        layer.open({
          type: 2,
          title: '修改密码',
          content: '/templates/change-pass.html',
          area: ['800px', '600px']
        });
      });


      // 登出按钮点击事件 - 增强版本
      document.getElementById('logout-btn').addEventListener('click', function () {
        layer.confirm('确定要退出登录吗？', {
          icon: 3,
          title: '提示'
        }, function (index) {
          layer.close(index);

          const loading = layer.load(1);

          // 直接使用 http.logout()，它已经包含了所有清理逻辑
          http.logout()
            .then(() => {
              layer.msg('已安全退出', {
                icon: 1,
                time: 1000
              });
            })
            .catch(err => {
              // 即使失败，http.logout 也已经清理了本地存储
              console.log('登出过程完成:', err);
            })
            .finally(() => {
              layer.close(loading);

              // 统一跳转逻辑
              if (window.history?.replaceState) {
                window.history.replaceState(null, null, '/');
              }
              setTimeout(() => {
                window.location.replace('/');
              }, 1000);
            });
        });
      });

      // // 自定义固定条
      // util.fixbar({
      //   bars: [{ // 定义可显示的 bar 列表信息 -- v2.8.0 新增
      //     type: 'new',
      //     icon: 'layui-icon-share'
      //   }, {
      //     type: 'open',
      //     icon: 'layui-icon-help'
      //   }, {
      //     type: 'export',
      //     icon: 'layui-icon-cart',
      //     style: 'background-color: #FF5722;'
      //   }, {
      //     type: 'file',
      //     content: '群',
      //     style: 'font-size: 21px;'
      //   }],
      //   // bar1: true,
      //   // bar2: true,
      //   // default: false, // 是否显示默认的 bar 列表 --  v2.8.0 新增
      //   // bgcolor: '#393D52', // bar 的默认背景色
      //   // css: {right: 100, bottom: 100},
      //   // target: '#target-test', // 插入 fixbar 节点的目标元素选择器
      //   // duration: 300, // top bar 等动画时长（毫秒）
      //   on: { // 任意事件 --  v2.8.0 新增
      //     mouseenter: function (type) {
      //       layer.tips(type, this, {
      //         tips: 4,
      //         fixed: true
      //       });
      //     },
      //     mouseleave: function (type) {
      //       layer.closeAll('tips');
      //     }
      //   },
      //   // 点击事件
      //   click: function (type) {
      //     console.log(this, type);
      //     if (type === 'new') {
      //       // 新建项目
      //       currentProject = null;
      //       openPopup('新建项目', `/common/project_design.html?design_type=${DesignType}`, {
      //         width: (window.screen.width * 0.6) + 'px',
      //         height: (window.screen.height * 0.7) + 'px'
      //       });
      //     } else if (type === 'open') {
      //       // 打开项目
      //       currentProject = null;
      //       openPopup('打开项目', `/common/project_open.html?design_type=${DesignType}`, {
      //         width: (window.screen.width * 0.6) + 'px',
      //         height: (window.screen.height * 0.7) + 'px'
      //       });
      //     } else if (type === 'export') {
      //       // 导出项目
      //       if (!currentProject) {
      //         layer.msg('请先打开或新建项目', { icon: 2 });
      //         return;
      //       }
      //       window.location.href = `/common/project_export.html?project_id=${currentProject.id}`;
      //     }
      //   }
      // });

    });
  </script>
  <style>
    /* 调整头部高度 */
    .layui-header {
      height: 60px !important;
      line-height: 60px !important;
    }

    #content {
      height: 100%;
      width: 100%;
      overflow: hidden;      /* 关键：防止嵌套滚动 */
      position: relative;
    }

    /* 调整侧边栏和主体区域 */
    .layui-side,
    .layui-body {
      top: 60px !important;
      height: calc(100vh - 60px) !important;
    }

    /* 确保logo居中 */
    .title-logo {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      line-height: normal;
    }
  </style>

</body>

</html>